<script lang="ts" setup>
import { ref } from 'vue';
// 卡片组件
import CardItem from './components/card-item/index.vue';
// 图一-柱状图
import BarChart from './components/echarts/barChart.vue';
// 图二-滚动列表
import ScrolledList from './components/scrolled-list/index.vue';
// 图三-玫瑰图
import roseChart from './components/echarts/roseChart.vue';
// 图四-词云图
import WordCloudChart from './components/echarts/wordCloudChart.vue';
// 图五-雷达图
import RadarChart from './components/echarts/radarChart.vue';

// 卡片组件数据-渲染顶部卡片组件
const cardList = ref([
	{
		name: '用户人数',
		enName: 'Total number of members',
		number: 7125,
		iconClass: 'card-list-1',
		countClass: 'count1'
	},
	{
		name: '社团总数',
		enName: 'cadres at their posts',
		number: 1125,
		iconClass: 'card-list-2',
		countClass: 'count2'
	},
	{
		name: '库存物资',
		enName: 'Inventory',
		number: 632,
		iconClass: 'card-list-3',
		countClass: 'count3'
	},
	{
		name: '消息中心',
		enName: 'pending approval',
		number: 15,
		iconClass: 'card-list-4',
		countClass: 'count4'
	}
]);
</script>

<template>
	<div class="main-content scrollbar-box">
		<!-- 顶部-卡片 -->
		<el-row :gutter="20" class="flex-bc">
			<el-col :span="6" v-for="item in cardList" :key="item.name">
				<!-- 卡片组件 -->
				<CardItem :cardData="item" />
			</el-col>
		</el-row>

		<!-- 中间-柱状图与无限滚动 -->
		<el-row class="mt-6" :gutter="20">
			<el-col :span="16">
				<el-card>
					<template #header>
						<div>图一</div>
					</template>
					<!-- 图一-柱状图 -->
					<BarChart />
				</el-card>
			</el-col>

			<el-col :span="8">
				<el-card>
					<template #header>
						<div>图二</div>
					</template>
					<!-- 图二-滚动列表 -->
					<ScrolledList />
				</el-card>
			</el-col>
		</el-row>

		<!-- 底部-三个图例 -->
		<el-row class="mt-6" :gutter="20">
			<el-col :span="8">
				<el-card>
					<template #header>
						<div>图三</div>
					</template>
					<!-- 图三-玫瑰图 -->
					<roseChart />
				</el-card>
			</el-col>

			<el-col :span="8">
				<el-card>
					<template #header>
						<div>图四</div>
					</template>
					<!-- 图四-词云图 -->
					<WordCloudChart />
				</el-card>
			</el-col>

			<el-col :span="8">
				<el-card>
					<template #header>
						<div>图五</div>
					</template>
					<!-- 图五-雷达图 -->
					<RadarChart />
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
<style lang="scss" scoped>
.el-card {
	height: 450px;

	:deep(.el-card__body) {
		height: 400px;
	}
}
</style>
